<!--
 *@开发者: 刘翔
 *@创建时间: 2025-05-23 16:34:13
 *@描述: 各病例类型的超支结余变化趋势
!-->
<template>
  <div class="page-title-12_3">
    <div class="page-title-12_3-top">
      <span class="page-title-12_3-top-title">高倍率病例</span>
      <div class="page-title-12_3-top-form">
        <formList topHeightValue="10%" bottomHeightValue="90%" :formParameter="formParameter" :data_list="data_list" />
      </div>
    </div>
    <div class="page-title-12_3-center">
      <div ref="pageTitle12CenterEcharts1" class="page-title-12_3-center-echarts-1"></div>
      <div ref="pageTitle12CenterEcharts2" class="page-title-12_3-center-echarts-2"></div>
      <div ref="pageTitle12CenterEcharts3" class="page-title-12_3-center-echarts-3"></div>
    </div>
    <div class="page-title-12_3-bottom">
      <span v-html="card1.text1"></span>
    </div>
  </div>
</template>

<script>
import formList from '../components/formList/formList';
import * as echarts from 'echarts';

export default {
  // 组件名称
  name: 'pageTile12_3',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList,
  },
  // 组件状态值
  data() {
    return {
      card1: {},
      data_list: [],
      formParameter: [
        { width: '10%', title: '月份' },
        { width: '10%', title: '病例数' },
        { width: '10%', title: 'CMI' },
        { width: '15%', title: '平均点值(元)' },
        { width: '10%', title: '差异系数' },
        { width: '10%', title: '次均费用' },
        { width: '10%', title: '每权重费用(元)' },
        { width: '15%', title: '次均超支结余(元)', highlightValue: '次均超支结余金额(元)是否标红' },
        { width: '10%', title: '总超支结余(万元)', highlightValue: '总超支结余(万元)是否标红' },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data) {
      this.data_list = data.data['超支主要类型'].data_list;
      let data_list1 = data.data['病例类型结余分布']['高倍率病例'];
      let data_list2 = data.data['病例类型结余分布']['正常病例'];
      let data_list3 = data.data['病例类型结余分布']['低倍率病例'];
      let desc = data.desc;
      // 高倍率病例
      this.echartsInit1(data_list1);
      // 正常病例
      this.echartsInit2(data_list2);
      // 低倍率病例
      this.echartsInit3(data_list3);
      //内容
      this.cardData(desc);
    },
    // 高倍率病例
    echartsInit1(data_list) {
      let exceedType1 = '高倍率病例';
      let exceedType2 = '月份';
      let myChart = echarts.init(this.$refs.pageTitle12CenterEcharts1);
      let option;
      option = {
        title: {
          text: exceedType1,
          top: '5%',
          left: '50%',
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        yAxis: {
          type: 'category',
          data: [],
          barMaxWidth: 50,
          axisLabel: {
            show: true,
            fontSize: 14,
            color: '#8e8e8e',
          },
        },
        series: [
          {
            name: '超支结余',
            type: 'bar',
            data: [],
            barMaxWidth: 50,
            itemStyle: {
              color: function (params) {
                return params.data > 0 ? '#5470c6' : '#ee6666'; // 大于0蓝色，小于0红色
              },
            },
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 1,
              formatter: '{c}万',
            },
          },
        ],
      };
      data_list.forEach(item => {
        option.series[0].data.unshift(item['超支结余']);
        option.yAxis.data.unshift(item[exceedType2]);
      });
      // option.series[0].data.sort((a, b) => b - a);
      option && myChart.setOption(option);
    },
    // 正常病例
    echartsInit2(data_list) {
      let exceedType1 = '正常病例';
      let exceedType2 = '月份';
      let myChart = echarts.init(this.$refs.pageTitle12CenterEcharts2);
      let option;
      option = {
        title: {
          text: exceedType1,
          top: '5%',
          left: '50%',
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        yAxis: {
          type: 'category',
          data: [],
          barMaxWidth: 50,
          axisLabel: {
            show: true,
            fontSize: 14,
            color: '#8e8e8e',
          },
        },
        series: [
          {
            name: '超支结余',
            type: 'bar',
            data: [],
            barMaxWidth: 50,
            itemStyle: {
              color: function (params) {
                return params.data > 0 ? '#5470c6' : '#ee6666'; // 大于0蓝色，小于0红色
              },
            },
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 1,
              formatter: '{c}万',
            },
          },
        ],
      };
      data_list.forEach(item => {
        option.series[0].data.unshift(item['超支结余']);
        option.yAxis.data.unshift(item[exceedType2]);
      });
      // option.series[0].data.sort((a, b) => a - b);
      option && myChart.setOption(option);
    },
    //低倍率病例
    echartsInit3(data_list) {
      let exceedType1 = '低倍率病例';
      let exceedType2 = '月份';
      let myChart = echarts.init(this.$refs.pageTitle12CenterEcharts3);
      let option;
      option = {
        title: {
          text: exceedType1,
          top: '5%',
          left: '50%',
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        yAxis: {
          type: 'category',
          data: [],
          barMaxWidth: 50,
          axisLabel: {
            show: true,
            fontSize: 14,
            color: '#8e8e8e',
          },
        },
        series: [
          {
            name: '超支结余',
            type: 'bar',
            data: [],
            barMaxWidth: 50,
            itemStyle: {
              color: function (params) {
                return params.data > 0 ? '#5470c6' : '#ee6666'; // 大于0蓝色，小于0红色
              },
            },
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 1,
              formatter: '{c}万',
            },
          },
        ],
      };
      data_list.forEach(item => {
        option.series[0].data.unshift(item['超支结余']);
        option.yAxis.data.unshift(item[exceedType2]);
      });
      // option.series[0].data.sort((a, b) => a - b);
      option && myChart.setOption(option);
    },
    //卡片内容
    cardData(desc) {
      this.card1 = {
        text1: desc,
      };
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-title-12_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .page-title-12_3-top {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 60%;
    .page-title-12_3-top-title {
      margin-bottom: 10px;
      font-size: 1.7rem;
    }
    .page-title-12_3-top-form {
      width: 100%;
      height: 100%;
    }
  }
  .page-title-12_3-center {
    display: flex;
    height: 40%;
    .page-title-12_3-center-echarts-1,
    .page-title-12_3-center-echarts-2,
    .page-title-12_3-center-echarts-3 {
      width: 33.33%;
      height: 100%;
    }
  }
  .page-title-12_3-bottom {
    margin: 0 20px;
    padding: 2%;
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    height: 10%;
    line-height: 40px;
    background: #fff2ca;
    border-radius: 16px;
    border: 1px solid #000;
    .color-tips {
      color: #ff1310;
    }
  }
}
</style>
